import React from 'react'
import 'antd/dist/antd.css'
import { Input, Button, List, Space, Tooltip } from 'antd'
import {
    RotateLeftOutlined,
    RotateRightOutlined
} from '@ant-design/icons';


const DataListUI = (props) => { // 无状态组件：可以提高程序性能
    return (
        <div style={{ margin: '10px' }}>
            <div>
                <Input allowClear placeholder={props.inputValue} style={{ width: '250px', marginRight: '10px' }} onChange={props.changeInputValue} />
                <Button type='primary' onClick={props.clickBtn}>增加</Button>
                <Space style={{ marginLeft: '10px' }}>
                    <Tooltip placement="top" title={'撤销(ctrl+z)'}>
                        <RotateLeftOutlined style={{ cursor: 'pointer' }} onClick={props.ctrlzBtn} />
                    </Tooltip>
                    <Tooltip placement="top" title={'还原(ctrl+y)'}>
                        <RotateRightOutlined style={{ cursor: 'pointer' }} onClick={props.ctrlyBtn} />
                    </Tooltip>
                </Space>
            </div>
            <div style={{ marginTop: '10px', width: '324px' }}>
                <List
                    size="small"
                    header={<div>Header</div>}
                    footer={<div>Footer</div>}
                    bordered
                    dataSource={props.list}
                    renderItem={(item) => <List.Item>{item}</List.Item>}
                />
            </div>
        </div>
    )
}


export default DataListUI;